<template>
	<div>
		<el-row>
			<el-col :span="22">
				<!-- 				<el-form :model="formData" inline>
					<el-form-item label="年份">
						<el-date-picker v-model="formData.year" type="year" value-format="yyyy" placeholder="选择年份">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="月份" placeholder="选择月份">
						<el-select v-model="formData.month">
							<el-option v-for="item in monthList" :value="item.value" :label="item.month"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="期号">
						<el-select v-model="formData.num">
							<el-option value="01" label="第1期(1号)"></el-option>
							<el-option value="10" label="第2期(10号)"></el-option>
							<el-option value="20" label="第3期(20号)"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="是否扎帐" v-show="LivingObj.Livingexpenses.Settlement==''||LivingObj.Livingexpenses.Settlement==null">
						<el-radio-group v-model="formData.istent">
							<el-radio :label="true">是</el-radio>
							<el-radio :label="false">否</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item>
						<el-button type="success" icon="el-icon-search" @click="getTableData">查询</el-button>
					</el-form-item>
				</el-form> -->
			</el-col>
			<el-col :offset="22" :span="2" align="right">
				<div class="approvalClass">
					<p class="approvalMessage" :style="{ 'color':getMessage.color }">{{ getMessage.message }}</p>
					<p class="approvalzhazhang" v-if="isSettlement" style="color: #67C23A">已扎帐</p>
					<!-- <p class="approvalzhazhang" v-else style="color:#E6A23C;">未扎帐</p> -->
				</div>
			</el-col>
			<el-col :span="24">
				<div style="display: flex;margin-bottom: 5px;">
					<el-popconfirm @confirm="AddLivingexpensesEvent(true)" confirm-button-text="确定" 
						style="margin-right: 10px;" cancel-button-text="取消" icon="el-icon-info" icon-color="red"
						title="你确定要审批选中的数据吗?">
						<el-button type="primary" slot="reference" icon="el-icon-search"
							v-show="$store.state.user.roleid==1 || $store.state.user.roleid==24" :disabled="LivingObj.Livingexpenses.OrderStatus==2">审批</el-button>
					</el-popconfirm>
					<el-popconfirm @confirm="AddLivingexpensesEvent(false)" confirm-button-text="确定" 
						style="margin-right: 10px;" cancel-button-text="取消" icon="el-icon-info" icon-color="red"
						title="你确定要提交数据吗?">
						<el-button type="success" slot="reference" :disabled="LivingObj.Livingexpenses.OrderStatus==2">提交工资</el-button>
					</el-popconfirm>
				</div>
				<el-table class="usertable" :data="tableData" border @select="TableSelectEvent"
					@row-click="RowClickEvent" :cell-style="{ padding: '5px 0 ' }">
					<!-- <el-table-column type="selection" width="55" align="center" /> -->
					<el-table-column type="index" label="序号" width="50" align="center" :index="indexMethod" />
					<el-table-column label="姓名" align="center" prop="UserName" />
					<el-table-column label="工号" align="center" prop="UserNumber" />
					<el-table-column label="银行卡" align="center" prop="BankName" />
					<el-table-column label="银行卡号" align="center" prop="BankCardNumber" />
					<el-table-column label="工资" align="center" prop="Money">
						<template slot-scope="scope">
							<el-input v-if="scope.row.isShow" v-model="scope.row.Money"
								@blur="CheckAmountEvent(scope.row,'Money')"></el-input>
							<p v-else>{{ scope.row.Money }}</p>
						</template>
					</el-table-column>
					<el-table-column label="社保" align="center" prop="Socialinsurance" v-if="formData.istent">
						<template slot-scope="scope">
							<el-input v-if="scope.row.isShow" v-model="scope.row.Socialinsurance"
								@blur="CheckAmountEvent(scope.row,'Socialinsurance')"></el-input>
							<p v-else>{{ scope.row.Socialinsurance }}</p>
						</template>
					</el-table-column>
				</el-table>
			</el-col>

			<!-- 			<el-col :span="24" align="right">
				<el-pagination @size-change="getTableData" @current-change="getTableData"
					:current-page.sync="pagination.currentPage" :page-sizes="pagination.pagesizes"
					:page-size.sync="pagination.pagesize" layout="total, sizes, prev, pager, next, jumper"
					:total.sync="pagination.total">
				</el-pagination>
			</el-col> -->
		</el-row>

		<el-dialog append-to-body title="提示" :visible.sync="dialogVisible" width="30%" @close="dialogVisible = false">
			<div style="display: flex;flex-direction: column;gap: 10px;">
				<span>你确定要提交此计划单吗?</span>
				<div style="display: flex;align-items: center">
					<el-checkbox v-model="LivingObj.Livingexpenses.Settlement" @change="checkboxSettlement"
						style="margin-right: 10px;">年度开账<span style="color:#E6A23C">(年度开账将结算上一年度数据)</span></el-checkbox>
				</div>
				<div v-show="LivingObj.Livingexpenses.Settlement">
					扎帐年份：<el-date-picker v-model="LivingObj.Livingexpenses.SettlementNumber" type="year"
						value-format="yyyy" placeholder="选择年份" @change="SettlementNumberEvent"></el-date-picker>
				</div>
				<div v-if="CheckSettlementResult.StatusCode == 500 && CheckSettlementResult.Message!=''">
					<p style="color: #E6A23C;margin:5px 0px !important; ">{{ CheckSettlementResult.Message }}</p>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="IsUpSettlementHandler(false)">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		CheckAmount
	} from "../../../../public/Scriput/Public.js"
	import dayjs from 'dayjs'
	export default {
		props: {
			tableRow: {
				type: Object,
				required: true
			}
		},
		data() {
			return {
				monthList: [{
						month: "1月份",
						value: '01'
					},
					{
						month: "2月份",
						value: '02'
					},
					{
						month: "3月份",
						value: '03'
					},
					{
						month: "4月份",
						value: '04'
					},
					{
						month: "5月份",
						value: '05'
					},
					{
						month: "6月份",
						value: '06'
					},
					{
						month: "7月份",
						value: '07'
					},
					{
						month: "8月份",
						value: '08'
					},
					{
						month: "9月份",
						value: '09'
					},
					{
						month: "10月份",
						value: '10'
					},
					{
						month: "11月份",
						value: '11'
					},
					{
						month: "12月份",
						value: '12'
					},
				],
				formData: {
					year: '',
					month: '',
					num: '',
					istent: false,
				},
				mainUserList: [],
				selectUserList: [],
				tableData: [],
				//分页数据绑定
				pagination: {
					currentPage: 1,
					pagesizes: [10, 20, 30, 40, 50],
					pagesize: 10,
					total: 100
				},
				username: '',
				LivingObj: {
					Livingexpenses: {
						LivingeBatch: "",
						Settlement: false,
						OrderStatus: 0,
						SettlementNumber: ''
					},
					Livingexpensesinfo: [{
						Id: 0,
						Delete: false,
						LivingexpensesId: 0,
						UserId: 0,
						Money: 0,
						Socialinsurance: 0
					}],
				},
				newLivingeBatch: '',
				ApprovalList: [],
				dialogVisible: false,
				isSettlement: false,
				CheckSettlementResult: {
					Status: false,
					StatusCode:200,
					Message:'',
				}
			}
		},
		watch: {
			'tableRow.LivingeBatch': {
				handler(val) {
					this.getTableData()
				},
				immediate: true,
				deep: true,
			}
		},
		created() {
			this.GetLivingOrderStateResponse()
		},
		computed: {
			getMessage() {
				let result = {
					message: '',
					color: 'black'
				}
				let index = this.ApprovalList.findIndex(x => x.Value == this.LivingObj.Livingexpenses.OrderStatus)
				if (index > -1) result.message = this.ApprovalList[index].Description
				result.color = this.LivingObj.Livingexpenses.OrderStatus == 0 ? '#E6A23C' : this.LivingObj.Livingexpenses
					.OrderStatus == 1 ? '#409EFF' : '#67C23A'
				return result
			}
		},
		methods: {
			//表格序号
			indexMethod(index) {
				return index + 1
			},
			//获取表格数据
			getTableData() {
				this.$http.post('Livingexpenses/CreateGetLivingexpensesUsers').then(res => {
					const {
						StatusCode,
						Data
					} = res.data || 0
					if (StatusCode == 200) {
						this.tableData = Data.map(x => {
							return {
								Id: 0,
								LivingexpensesId: 0,
								UserId: x.Id,
								UserName: x.UserName,
								UserNumber: x.UserNumber,
								BankName: x.BankName,
								BankCardNumber: x.BankCardNumber,
								isShow: false,
								Money: 0,
								Socialinsurance: 0,
							}
						})
						const {
							LivingeBatch
						} = this.tableRow || ''
						this.$http.post('Livingexpenses/GetLivingexpensesUsers', {
							livingeBatch: LivingeBatch
						}).then(dres => {
							this.newLivingeBatch = LivingeBatch
							if (dres.data.StatusCode == 200) {
								this.LivingObj = dres.data.Data
								this.isSettlement = dres.data.Data.Livingexpenses.Settlement
								if (this.LivingObj.Livingexpensesinfo.length) {
									this.LivingObj.Livingexpensesinfo.forEach(x => {
										let index = this.tableData.findIndex(f => f.UserId == x
											.UserId)
										if (index > -1) {
											this.tableData[index].Money = x.Money
											this.tableData[index].Socialinsurance = x
												.Socialinsurance
											this.tableData[index].LivingexpensesId = x
												.LivingexpensesId
											this.tableData[index].Id = x.Id
										}
									})
									// if(this.LivingObj.Livingexpenses.OrderStatus == 2){
									// 	this.tableData = this.tableData.filter(x=>x.Money != 0)
									// }
									this.tableData = this.tableData.filter(x=>x.Money != 0)
								}
							}
						})
					}
				})
			},
			//表格选择项
			RowClickEvent(row) {
				let state = this.ApprovalList.find(x => x.Description == '财务发放')
				if (this.LivingObj.Livingexpenses.OrderStatus == state.Value) row.isShow = false
				else row.isShow = true
			},
			//表格选中
			TableSelectEvent(values, row) {
				this.selectUserList = values
			},
			//数字校验
			CheckAmountEvent(row, type) {
				const {
					Money,
					Socialinsurance
				} = row || ''
				let num
				if (type == 'Money') num = Money
				else num = Socialinsurance
				if (!CheckAmount(num)) {
					if (type == 'Money') row.Money = 0
					else row.Socialinsurance = 0
					this.$message.warning('请输入有效的金额(保留2位小数)')
				} else {
					let index = this.mainUserList.findIndex(x => x.Id == row.Id)
					if (index > -1) {
						if (type == 'Money') this.mainUserList[index].Money = row.Money
						else this.mainUserList[index].Socialinsurance = row.Socialinsurance
					}
					// row.isShow = false
				}
			},
			//修改生活数据
			AddLivingexpensesEvent(isApproval) {
				if (this.LivingObj.Livingexpenses.Settlement && this.LivingObj.Livingexpenses.SettlementNumber == '') {
					this.$message.warning('开年扎帐请选择年份!')
					return
				}
				let url, params
				//编辑
				if (this.LivingObj.Livingexpenses.Id) {
					url = 'Livingexpenses/UpLivingexpenses'
					params = {
						UpOrAudit: isApproval ? 1 : 0,
						livingexpenses: {
							...this.LivingObj.Livingexpenses
						},
						livingexpensesinfo: []
					}
					// params.livingexpensesinfo = this.tableData.filter(x => x.Money > 0)
					params.livingexpensesinfo = this.tableData
				}
				if (params.livingexpensesinfo.length == 0) {
					this.$message.warning('请填写有效的数据!')
					return
				}	
				this.$http.post(url, {
					...params
				}).then(res => {
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if (StatusCode == 200) {
						if (!isApproval) this.$message.success('提交成功!')
						else {
							this.$message.success('审批成功!')
							this.getTableData()
						}
						this.dialogVisible = false
					} else {
						if (!isApproval) this.$message.warning(Message)
						else this.$message.warning(Message)
					}
				})
			},
			//审批
			ApprovalEvent() {
				let params = {
					livingexpenses: {
						...this.LivingObj.Livingexpenses
					},
					livingexpensesinfo: []
				}
				params.livingexpensesinfo = this.selectUserList.map(x => {
					return {
						...x,

					}
				})
				this.$http.post('Livingexpenses/UpLivingexpenses', {
					...params
				}).then(res => {
					const {
						StatusCode,
						Data
					} = res.data || 0
					if (StatusCode == 200) {
						this.$message.success('提交成功!')
					}
				})
			},
			//获取审批枚举类型
			GetLivingOrderStateResponse() {
				this.$http.post('Livingexpenses/GetLivingOrderStateResponse').then(res => {
					const {
						StatusCode,
						Data
					} = res.data || 0
					if (StatusCode == 200) this.ApprovalList = Data
				})
			},
			checkboxSettlement(value) {
				if (!value) {
					this.LivingObj.Livingexpenses.SettlementNumber = ''
					this.CheckSettlementResult = {
						Status: false,
						Message:'',
						StatusCode: 500,
					}
				}
			},
			//时间选择事件
			SettlementNumberEvent(value) {
				if (value == '') return
				this.$http.post('Livingexpenses/CheckSettlement', {
					settlementNumber: value,
					projectId: 0
				}).then(res => {
					this.CheckSettlementResult = res.data
				})
			},
			//修改已经扎帐订单,请谨慎操作
			IsUpSettlementHandler(){
				//不存在已扎帐
				if(this.CheckSettlementResult.StatusCode == 200){
					this.AddLivingexpensesEvent(false)
				}else{
					//存在已扎帐,修改原数据
					this.$http.post('Livingexpenses/UpSettlement', {
						settlementNumber: this.LivingObj.Livingexpenses.SettlementNumber,
						projectId: 0
					}).then(res => {
						const {
							StatusCode,
							Data,
							Message
						} = res.data || 0
						if (StatusCode == 200){
							this.AddLivingexpensesEvent(false)
						}else{
							this.$message.warning(Message)
						}
					})					
				}
			}
		}
	}
</script>

<style scoped>
	.approvalClass {
		position: absolute;
		right: 40px;
		text-align: center;
		display: flex;
		gap: 5px;
	}

	.approvalMessage {
		font-weight: bold;
		font-size: 24px;
		font-style: oblique;
		margin-bottom: 5px !important;
		margin-top: 0px !important;
	}

	.approvalzhazhang {
		font-weight: bold;
	}
</style>